<template>
  <view class="user-info">
    <!-- 纵向显示的用户信息卡片 -->
    
    <!-- 第一行：图片和名字 -->
    <view class="vertical-item">
      <view class="item-content user-item-content" @click="getUserProfile">
        <image :src="userInfo.avatarUrl || '/static/logo.png'" class="avatar" mode="aspectFill"></image>
        <text class="user-name">{{ userInfo.nickName || '未获取到用户名' }}</text>
      </view>
    </view>
    
    <!-- 新增：获取手机号 -->
    <view class="vertical-item">
      <view class="item-content" @click="getPhoneNumber">
        <text class="item-label">手机号码:</text>
        <text class="item-value">{{ phoneNumber || '未获取到手机号' }}</text>
      </view>
    </view>
    
    <!-- 第二行：OpenId和信息 -->
    <view class="vertical-item">
      <view class="item-content">
        <text class="item-label">OpenID:</text>
        <text class="item-value">{{ openID || '未获取到OpenID' }}</text>
      </view>
    </view>
    
    <!-- 第三行：发票台头和信息 -->
    <view class="vertical-item">
      <view class="item-content" @click="getInvoiceTitle">
        <text class="item-label">发票抬头信息:</text>
        <text class="item-value">{{ invoiceInfo.title ? '已获取发票抬头' : '未获取到发票抬头' }}</text>
      </view>
    </view>
    
    <!-- 第四行：地址信息 -->
    <view class="vertical-item">
      <view class="item-content" @click="getAddress">
        <text class="item-label">地址信息:</text>
        <text class="item-value">{{ addressInfo.name ? '已获取地址信息' : '未获取到地址信息' }}</text>
      </view>
    </view>
    
	<!-- 获取数据 -->
	<view class="vertical-item">
	  <view class="item-content back-content" @click="refreash">
	    <text class="back-text">获取数据</text>
	  </view>
	</view>
    <!-- 返回登录页 -->
    <view class="vertical-item">
      <view class="item-content back-content" @click="goBack">
        <text class="back-text">返回登录页</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 响应式状态
const openID = ref('');
const userInfo = ref({
  nickName: '',
  avatarUrl: ''
});
const phoneNumber = ref('');
const invoiceInfo = ref({
  title: '',
  taxNumber: '',
  address: '',
  telephone: '',
  bankName: '',
  bankAccount: ''
});
const addressInfo = ref({
  name: '',
  phone: '',
  provinceName: '',
  cityName: '',
  countyName: '',
  detailInfo: ''
});

// 页面挂载时获取参数
const refreash = () => {
  // 使用uni.getStorageSync尝试从本地存储获取openID
  const storedOpenID = uni.getStorageSync('userOpenID');
  if (storedOpenID) {
    openID.value = storedOpenID;
    console.log('从本地存储获取到的OpenID:', openID.value);
  }
  
  // 尝试从本地存储获取用户信息
  const storedUserInfo = uni.getStorageSync('userProfile');
  if (storedUserInfo) {
    userInfo.value = storedUserInfo;
    console.log('从本地存储获取到的用户信息:', storedUserInfo);
  }
  
  // 尝试从本地存储获取手机号
  const storedPhoneNumber = uni.getStorageSync('userPhoneNumber');
  if (storedPhoneNumber) {
    phoneNumber.value = storedPhoneNumber;
    console.log('从本地存储获取到的手机号:', storedPhoneNumber);
  }
  
  // 尝试从本地存储获取发票抬头信息
  const storedInvoice = uni.getStorageSync('invoiceTitle');
  if (storedInvoice) {
    invoiceInfo.value = storedInvoice;
    console.log('从本地存储获取到的发票抬头:', storedInvoice);
  }
  
  // 尝试从本地存储获取地址信息
  const storedAddress = uni.getStorageSync('userAddress');
  if (storedAddress) {
    addressInfo.value = storedAddress;
    console.log('从本地存储获取到的地址信息:', storedAddress);
  }
};

// 获取发票抬头
const getInvoiceTitle = () => {
  try {
    // @ts-ignore - has对象可能在TypeScript中没有定义，但在运行时存在
    has.chooseInvoiceTitle({
      success: (res) => {
        console.log('chooseInvoiceTitle success, res = ' + JSON.stringify(res));
        // 更新发票抬头信息
        invoiceInfo.value = {
          title: res.title || '',
          taxNumber: res.taxNumber || '',
          address: res.address || '',
          telephone: res.telephone || '',
          bankName: res.bankName || '',
          bankAccount: res.bankAccount || ''
        };
        // 存储到本地
        uni.setStorageSync('invoiceTitle', invoiceInfo.value);
      },
      fail: () => {
        console.log('chooseInvoiceTitle fail');
        // 显示失败提示

      }
    });
  } catch (error) {
    console.error('获取发票抬头出错:', error);

  }
};

// 获取地址信息
const getAddress = () => {
  // @ts-ignore - has对象可能在TypeScript中没有定义，但在运行时存在
  has.chooseAddress({
    success: (res) => {
      console.log('chooseAddress success,res = ' + JSON.stringify(res));
      // 更新地址信息
      addressInfo.value = {
        name: res.name || '',
        phone: res.phone || '',
        provinceName: res.provinceName || '',
        cityName: res.cityName || '',
        countyName: res.countyName || '',
        detailInfo: res.detailInfo || ''
      };
      // 存储到本地
      uni.setStorageSync('userAddress', addressInfo.value);
    },
    fail: () => {
      console.log('chooseAddress fail');
      // 显示失败提示

    }
  });
};

// 获取用户信息（头像和名称）
const getUserProfile = () => {
  try {
    // @ts-ignore - has对象可能在TypeScript中没有定义，但在运行时存在
    has.getUserProfile({
      desc: '用于完善用户资料',
      success: (res) => {
        console.log('getUserProfile success, res = ' + JSON.stringify(res));
        // 更新用户信息
        userInfo.value = {
          nickName: res.userInfo.nickName || '',
          avatarUrl: res.userInfo.avatarUrl || ''
        };
        // 存储到本地
        uni.setStorageSync('userProfile', userInfo.value);
      },
      fail: () => {
        console.log('getUserProfile fail');
        // 显示失败提示

      }
    });
  } catch (error) {
    console.error('获取用户信息出错:', error);

  }
};

// 获取手机号
const getPhoneNumber = () => {
  try {
    // @ts-ignore - has对象可能在TypeScript中没有定义，但在运行时存在
    has.choosePhoneNumber({
      success: (res) => {
        console.log('choosePhoneNumber success, res = ' + JSON.stringify(res));
        // 更新手机号信息
        phoneNumber.value = res.phoneNumber || '';
        // 存储到本地
        uni.setStorageSync('userPhoneNumber', phoneNumber.value);
      },
      fail: () => {
        console.log('choosePhoneNumber fail');
        // 显示失败提示

      }
    });
  } catch (error) {
    console.error('获取手机号出错:', error);

  }
};

// 返回登录页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style scss scoped>
.user-info {
  padding: 20rpx;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 纵向项目样式 */
.vertical-item {
  background-color: white;
  border-radius: 15rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 项目内容样式 */
.item-content {
  display: flex;
  align-items: center;
  padding: 30rpx;
  position: relative;
}

/* 头像样式 */
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  background-color: #e0e0e0;
}

/* 用户名样式 */
.user-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: left;
}

/* 用户信息内容特殊样式 */
.user-item-content {
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-item-content:active {
  background-color: #f0f0f0;
}

/* 标签和值样式 */
.item-label {
  font-size: 30rpx;
  color: #666;
  width: 200rpx;
  text-align: left;
  flex-shrink: 0;
}

.item-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  text-align: left;
}



/* 返回内容样式 */
.back-content {
  justify-content: center;
  background-color: #1e88e5;
}

.back-text {
  font-size: 32rpx;
  color: white;
  font-weight: bold;
}
</style>